/**
 * Created by Dalyn on 2017/2/28.
 */
import React from "react";
import Relay from "react-relay";
import './css/Mycenter.css';
import InputBox from '../../../common/InputBox';
import Confirm from '../../../common/Confirm'
import MycenterModal from './MycenterModal'

import UserDetailMutation from "./mutation/UserDetailMutation"
import UpdateUserMutation from './mutation/UpdateUserMutation';

import { _message } from 'ANT_DE';
const message = _message;

/*导出组件*/
export default class Mycenter extends React.Component{

    constructor(props){
        super(props);
        this.state={
            isDisabledEmail:true,
            isDisabledPwd:false,
            isDisplayEmail:"none",
            isDisplayPwd:"none",
            email:'',

            _enterpriseCode:"",  //当前的邮箱
            emailValue:"" // 但前输入的邮箱
        };
        this.phone=''

        // this.arr=[{company:"山东省德州市制衣厂",part:"业务部",job:"采购员"},
        //     {company:"山东省德州市制衣厂",part:"业务部",job:"采购员"},
        //     {company:"山东省德州市制衣厂",part:"业务部",job:"采购员"},
        //     {company:"山东省德州市制衣厂",part:"业务部",job:"采购员"},
        //     {company:"山东省德州市制衣厂",part:"业务部",job:"采购员"}
        // ];
        this.arr = [];

        this.uid = sessionStorage.getItem('uid');
        this.onEmaliChnage = this.onEmaliChnage.bind(this);
    }

    componentWillMount(){
        Relay.Store.commitUpdate(
            new UserDetailMutation({
                uid: this.uid,
            }),
            {
                onFailure: () => {

                },
                onSuccess: (response) => {
                    console.log(response);
                    let data =  response.userDetail.userDetail;
                    let errorCode = data.errorCode;;

                    this.arr =  data.userModel.enterpriseDomainList
                    if(errorCode == 0){
                        let password = response.userDetail.userDetail.userModel.password;
                        let phone = response.userDetail.userDetail.userModel.phone;
                        let name = response.userDetail.userDetail.userModel.name;
                        let email = response.userDetail.userDetail.userModel.email;
                        this.phone = phone; 
                        this.setState({
                            _enterpriseCode:email,
                            emailValue:email,
                        });
                        this.refs.name.setState({
                            text:name || ''
                        });
                        this.refs.phone.setState({
                            text:phone || ''
                        });
                        this.refs.password.setState({
                            text:password || ''
                        });
                    }
                    // console.warn(JSON.stringify(response));
                }
            }
        )
    }

    modifyEmail(){
        this.setState({
            isDisabledEmail:false,
            isDisplayEmail:"block",
        },()=>{
            this.emailInfo.focus();
        })
    }

    modifyPwd(){
        this.setState({
            isDisabledPwd:false,
            isDisplayPwd:"block",
        })

        this.refs.MycenterModal.setState({
            visible : true,
        })

        // 清空它的内容值
        setTimeout(()=>{this.refs.MycenterModal.clear();})
    }


    test1(){
        // 格式验证
        let emailValue = this.state.emailValue;

        if( emailValue == null )emailValue = "";

        if( emailValue === this.state._enterpriseCode){
            this.setState({
                isDisabledEmail:true,
                isDisplayEmail:"none",
            })
            return;
        }
        //基础格式验证sddsd
        if( emailValue.indexOf(" ") > -1){
            message.error("请使用合法字符");
            this.emailInfo.focus();
        }else {
            if(!this.bluron("mal")){
                message.error("请检查当前邮箱格式");
                this.emailInfo.focus();
            }else{
                Relay.Store.commitUpdate(
                    new UpdateUserMutation({
                        uid:this.uid,
                        email:emailValue
                    }),
                    {
                        onFailure:()=>{
                            message.error("网络错误");
                        },
                        onSuccess:(response)=>{
                            console.log(response);
                        }
                    }
                )
                message.success("编辑完成");
                this.setState({
                    _enterpriseCode:emailValue,
                    isDisabledEmail:true,
                    isDisplayEmail:"none",
                })
            }
        }
    }

    test2(){
        this.setState({
            emailValue:this.state._enterpriseCode
        },()=>{
            this.setState({
                isDisabledEmail:true,
                isDisplayEmail:"none",
            })
        })
    }

    bluron(type){
        switch (type){
            case 'mal':
                let enterpriseCode1 = this.state.emailValue;
                let re_enterpriseCode = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                if(re_enterpriseCode.test(enterpriseCode1) || enterpriseCode1 === ""){
                    this.enterpriseCode = enterpriseCode1;
                    this.setState({
                        email:""
                    });
                    return true;
                }
                return false;
        }
    }

    belongCompany(){
        return  this.arr.map((item,index)=>{
          //如果是管理员就加红色边框 active sd
            return(
                <div key={index+"-"} className={ item.roleId < 0 ? "mycenter_list  active" : "mycenter_list" }>
                    <span style={{position:"absolute",left:"70px",top:"20px",height:"20px"}}>{item.enterpriseName}</span>
                    <span style={{position:"absolute",left:"70px",top:"65px",height:"20px"}}>{item.depName}</span>
                    <span style={{position:"absolute",left:"70px",top:"110px",height:"20px"}}>{item.roleName}</span>
                    <span style={{position:"absolute",left:"30px",top:"20px"}}>公司：</span>
                    <span style={{position:"absolute",left:"30px",top:"65px"}}>部门：</span>
                    <span style={{position:"absolute",left:"30px",top:"110px"}}>职务：</span>
                </div>
            )
        })
    }

    onEmaliChnage(e){
         this.setState({
             emailValue:e.target.value
         })
    }

    emailValue = value => this.emailInfo = value;

    render(){
        const value = this.state.emailValue === null ? "" : this.state.emailValue;

        return (
            <div className="myCenter">
                <div style={{height:230,borderBottom:"none"}}>
                    <p style={{height:55,border:"1px solid #ececec"}}>
                        <span className="mycenter_title_chunk">基础信息</span>
                    </p>

                    <div className="mycenter_form">
                        {/*邮箱与姓名*/}
                        <div style={{display: 'flex', 'justifyContent': 'flex-start', paddingLeft: '30'}}>
                        <div className="mycenter_item">
                            <span> 姓名 : </span>
                            <InputBox  className={"mycenter_info--name"} disabled={true} style={{width:270,height:27,borderColor: '#000',borderWidth: '1',marginLeft:36}} ref={'name'}/>
                        </div>

                          <div className="mycenter_item">
                             <span style={{marginRight:5}}> 邮箱 :</span>
                              <input type="text"  className={"mycenter_info--email"}  value={value}
                                     disabled={this.state.isDisabledEmail} style={{width:270,height:27,paddingLeft:10,borderColor: '#000',borderWidth: '1',marginLeft:60,background: '#f5fbfb'}}
                                     onChange={this.onEmaliChnage}
                                     ref={this.emailValue} onBlur={this.bluron.bind(this,'mal')} />
                          </div>

                          {
                            this.state.isDisplayEmail === 'none' ? <span className="mycenter_modify" onClick={this.modifyEmail.bind(this)}>  <i>  </i>  修改</span>
                            :  <div style={{display:this.state.isDisplayEmail}}>
                                <Confirm style={{width:86,height:28,lineHeight:"28px",marginLeft: '20px',fontSize:14, color: '#000',border: '1px solid #dcdcdc',backgroundColor:'#f7f7f7'}} tcontext={"确认"} touch={this.test1.bind(this)} />
                                <Confirm style={{width:86,height:28,lineHeight:"28px",marginLeft:"20px", fontSize:14,color: '#000',border:  '1px solid #dcdcdc',backgroundColor:'#f7f7f7'}} tcontext={"取消"} touch={this.test2.bind(this)} />
                            </div>
                          }
                      </div>

                        {/*手机密码*/}
                        <div style={{display: 'flex', 'justifyContent': 'flex-start', paddingLeft: '30'}}>
                            <div className="mycenter_item">
                                <span> 手机 : </span>
                                <InputBox  className={"mycenter_info--phone"} disabled={true}  style={{width:270,height:27,borderColor: '#000',marginLeft:36,borderWidth: '1',background: '#fff'}} ref={'phone'}/>
                            </div>
                            <div className="mycenter_item">
                                <span> 密码 :</span>
                                <InputBox  className={"mycenter_info--pas"} disabled style={{width:270,height:27,paddingLeft:10,borderColor: '#000',marginLeft:60,borderWidth: '1',background: '#f5fbfb'}} ref={'password'} type={'password'}/>
                            </div>

                          <span style={{color:"#ff6f64",position:"absolute",right:115,top:170,width:115,height:30,lineHeight:"30px"}}>{this.state.email}</span>
                          <span className="mycenter_modify" style={{display: !this.state.isDisabledPwd}} onClick={this.modifyPwd.bind(this)}> <i></i> 修改</span>
                      </div>
                    </div>
                </div>

                {/*所在企业*/}
                <div style={{minHeight:100,border:"1px solid #ededed",borderTop:"none",overflow:"hidden",paddingBottom:"30px"}}>
                    <p style={{height:55,marginBottom:40}}>
                        <span className="mycenter_title_chunk" >所在企业</span>
                    </p>
                    <div className="myCenter_en_container">
                        {
                            this.belongCompany()
                        }
                    </div>
                </div>
                <MycenterModal ref={"MycenterModal"} phone={this.phone}/>
            </div>
        )
    }
}
